<template>
  <div class="anquanhuiben base-background-img">
    <div class="m1">
      <a :href="url + '/magic/anquanhuiben/zhongban/xiaohuomiao/index.html'">
        <img src="~@/assets/magic/zhongban/1.png">
      </a>
    </div>
    <div class="m2">
      <a :href="url + '/magic/anquanhuiben/zhongban/wanjudao/index.html'">
        <img src="~@/assets/magic/zhongban/2.png">
      </a>
    </div>
    <div class="m3">
      <a :href="url + '/magic/anquanhuiben/zhongban/qiguaideyangayi/index.html'">
        <img src="~@/assets/magic/zhongban/3.png">
      </a>
    </div>
    <div class="m4">
      <a :href="url + '/magic/anquanhuiben/zhongban/banmajiaoniguomalu/index.html'">
        <img src="~@/assets/magic/zhongban/4.png">
      </a>
    </div>
    <div class="m1t">
      <p>小火苗</p>
    </div>
    <div class="m2t">
      <p>玩具岛</p>
    </div>
    <div class="m3t">
      <p>奇怪的羊阿姨</p>
    </div>
    <div class="m4t">
      <p>斑马教你过马路</p>
    </div>
  </div>
</template>

<script>
import STATICPATH from '../../config.js'
export default {
  name: 'zhongban',
  data () {
    return {
      url: STATICPATH
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        console.log(this)
        console.log(this.href)
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          console.log(this.href)
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  }
}
</script>

<style scoped>
.anquanhuiben > div {
  position: absolute; 
}
img {
  width: 100%;
  height: 100%;
}
.m1, .m2, .m3, .m4 {
  top: 270px;
  width: 170px;
  height: 140px;
}
.m1 {
  left: 190px;
}
.m2 {
  left: 450px;
}
.m3 {
  left: 700px;
}
.m4 {
  width: 120px;
  left: 950px;
}
.m1t, .m2t, .m3t, .m4t {
  top: 400px;
  width: 125px;
  text-align: center;
}
.m1t {
  left: 210px;
}
.m2t {
  left: 480px;
}
.m3t {
  left: 720px;
}
.m4t {
  left: 950px;
}
</style>
